<template>
  <el-form class="m7-form" :inline="true" label-position="top" size="mini" :model="formStacked.form" @submit.native.prevent>
      <el-form-item v-for="(item, index) in formStacked.advSearchOptions" :key="index" label-position="top" :prop="item.name" :label="item.inputType === 'checkbox' ? '   ' : item.label" @submit.native.prevent>
        <!-- 输入框 inputType: input -->
        <el-input size="mini"
          v-if="item.inputType === 'input'"
          v-model="formStacked.form[item.name]"
          :placeholder="item.placeholder"
          :clearable="item.clearable"
          @clear="searchFun"
          @blur='searchFun'
          @keyup.enter.native="searchFun">
          <i slot="prefix" class="el-input__icon el-icon-search" @click="searchFun"></i>
        </el-input>
        <!-- 下拉选择 inputType: select -->
        <div v-if="item.inputType === 'select'">
          <m7Select size="mini"
            v-model="formStacked.form[item.name]"
            @input="searchFun"
            placeholder="请选择" filterable
            :multiple="item.multiple || false"
            :collapse-tags="item.multiple || false"
            :options="item.selectData"
            :defaultProps="item.defaultProp || {label: 'name', value: '_id'}"
            :clearable="item.clearable">
          </m7Select>
        </div>
        <!-- ip地址选择 inputType: ip -->
        <div v-if="item.inputType === 'ip'" style="width: 402px">
          <ip-input :ip.sync="formStacked.form[item.name][0]" @out="searchFun"></ip-input>
          <div class="line"></div>
          <ip-input :ip.sync="formStacked.form[item.name][1]" @out="searchFun"></ip-input>
        </div>
        <!-- 下拉选择输入框组合 inputType: selectAndIpt -->
        <div v-if="item.inputType === 'selectAndIpt'">
          <m7Select size="mini"
            class="scopeSelect"
            v-model="formStacked.form[item.name]"
            @input="searchFun"
            placeholder="请选择" filterable
            :multiple="item.multiple || false"
            :collapse-tags="item.multiple || false"
            :options="item.selectData"
            :defaultProps="item.defaultProp || {label: 'name', value: '_id'}"
            :clearable="item.clearable">
          </m7Select>
          <el-input size="mini"
            class="scopeIpt"
            v-model="formStacked.form[item.searchName]"
            :placeholder="item.placeholder"
            :clearable="true"
            @clear="searchFun"
            @blur='searchFun'
            @keyup.enter.native="searchFun">
            <i slot="prefix" class="el-input__icon el-icon-search" @click="searchFun"></i>
          </el-input>
        </div>
        <!-- 日期时间选择框 inputType: dateTimeRange -->
        <el-date-picker
          v-if="item.inputType === 'dateTimeRange'"
          style="width: 320px;"
          v-model="formStacked.form[item.name]"
          type="datetimerange"
          :clearable="item.clearable"
          value-format='yyyy-MM-dd HH:mm:ss'
          @change="searchFun"
          :picker-options="formStacked.selfPickerOptions ? formStacked.selfPickerOptions : pickerOptions"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
        <!-- 日期选择框 inputType: dateRange -->
        <el-date-picker
          v-if="item.inputType === 'dateRange'"
          style="width: 220px;"
          v-model="formStacked.form[item.name]"
          type="daterange"
          :clearable="item.clearable"
          value-format='yyyy-MM-dd'
          @change="searchFun"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
        <!-- 复选框 inputType: checkbox -->
        <el-checkbox
          style="margin-top:12px"
          v-if="item.inputType === 'checkbox'"
          v-model="formStacked.form[item.name]"
          @change="searchFun">
          {{ item.label }}
        </el-checkbox>
        <!-- 级联选择器 inputType: cascader -->
        <el-cascader
          :clearable="true"
          size="small"
          v-if="item.inputType === 'cascader'"
          v-model="formStacked.form[item.name]"
          :options="item.selectData"
          @change="searchFun"
          :props="{ multiple: true, checkStrictly: true, label: 'name', value: '_id', emitPath: false }"
          :show-all-levels="false"
          :collapse-tags="true"
          placeholder="请选择">
        </el-cascader>
      </el-form-item>
  </el-form>
</template>

<script lang="ts">
/**
 * 搜索组件
 * inputType
 * input：输入框
 * select：下拉选择
 * ip：IP地址输入
 * selectAndIpt：下拉选择输入组合
 * dateTimeRange：日期时间选择框
 * dataRange：日期选择框
 * checkbox：复选框
 * cascader：级联选择框
 */
import { Component, Vue, Prop } from 'vue-property-decorator'
import IpInput from './ipInput.vue'
interface ArrayObj {
  props: string
}
@Component({ name: 'QuickSearch', components: { IpInput } })
export default class AdvancedSearch extends Vue {
  @Prop(Object) public advForm!: {}
  get formStacked () {
    return this.advForm
  }

  // 日期时间的快捷搜索项（最近一周，最近一个月，最近三个月）
  private pickerOptions: any = {
    shortcuts: [{
      text: '最近一周',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }, {
      text: '最近一个月',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }, {
      text: '最近三个月',
      onClick (picker) {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 89)
        const startTime = new Date(start.getFullYear(), start.getMonth(), start.getDate(), 0, 0, 0)
        const endTime = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 23, 59, 59)
        picker.$emit('pick', [startTime, endTime])
      }
    }]
  }

  // 搜索按钮
  private searchFun () {
    this.$emit('QuickSearch', this.formStacked)
  }
}
</script>
<style lang="stylus" scoped>
  .scopeSelect
    width 80px
    .el-select
    >>>.el-input__inner
      border-right none
      border-radius 4px 0px 0px 4px
  .scopeIpt
    width calc(100% - 80px)
    >>>.el-input__inner
      order-left none
      border-radius 0 4px 4px 0
  .line
    width: 8px
    height: 2px
    background: #303753
    display: inline-block
    margin: 0px 12px
    margin-bottom: 3px
</style>
